<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-exact-active{
            color:red;
            padding:0 5px;
        }
    </style>
</head>
<body>

    <div id="app">
        <h3>动态路由</h3>
        <router-link to="/detail/100">编号为100的新闻</router-link>
        <router-link to="/detail/101">编号为101的新闻</router-link>
        <router-link to="/detail/102">编号为102的新闻</router-link>
        <router-link to="/detail/103">编号为103的新闻</router-link>
        
        <router-view></router-view>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>

        // 动态路由
        //  -- 同一个组件，根据传入参数不同，显示不同的内容。
        // 例如：大事件项目前中的新闻详情页。
        //  localhost:3000/index.html#/detail/100   ---->  显示编号为100的新闻
        //  localhost:3000/index.html#/detail/101   ---->  显示编号为101的新闻
        
        // 1. 定义路由规则
        //    path:'/detail/:形参名'

        // 2. 跳转 `to:/detail/实参`

        // 3. 在组件中获取当前的参数值？
        //   this.$route.params.形参
        //   - $route 引入了vueRouter插件之后， vue组件内部通过 $route 就可以直接来访问当前的组件对象
        //   - $route这个对象有很多属性，params用来保存当前传入动态路由的参数值

        
        const myrouter = new VueRouter({
            
            routes: [
                // path是hash值，component是组件，就是显示的内容
                {path: '/',component:{template: `<div>我是主页!!!!!</div>`}},

                // /detail/:id  可以匹配类似于： /detail/XXXXX 的路径

                {path:'/detail/:id123',component:{
                        template: `<div>
                            <h1>新闻详情页-{{$route.params.id123}}</h1>
                            <button @click="h1">点击</button>
                        </div>`,
                        methods: {
                            h1 () {
                                console.log( this.$route.params.id123)
                            }
                        }
                    }
                },
                
                {path: '*',component:{template: `<div>你要访问的页面不存在，404！！！！</div>`}},

            ]
        })

  
        new Vue({
            el: '#app',
            data:{},
            methods:{},
            router: myrouter// 用来设置路由对象 
        })


    </script>
</body>
</html>